<template>
  <el-container class="h-100" v-loading="model.loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100" style="line-height: 80px;">
        <h5 class="d-inline">操作日志</h5>
        <div class="seach-input">
          <el-date-picker :clearable="false" size="small" v-model="date" type="daterange" align="right"
            unlink-panels format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
          <el-input v-model="keywords" placeholder="输入操作人账号" size="small" style="width: 210px;"
            @keyup.native.enter="newSearch">
            <el-button slot="append" type="primary" style="outline: none;" icon="el-icon-search"
              @click="newSearch"></el-button>
          </el-input>
        </div>
      </div>
    </el-header>
    <el-main class="p-2 m-2 bg-white">
      <el-table :data="model.rows">
        <el-table-column fixed label="编号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{
              scope.$index + (model.pageIndex - 1) * model.pageSize + 1
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.operType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作对象" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.operObject }}</span>
          </template>
        </el-table-column>
        <el-table-column label="IP地址" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.userType === 0 ?
              '超级用户' :(scope.row.userType === 1 ? '管理员' : (scope.row.userType === 2 ? '业务审核员' :
              (scope.row.userType === 3 ? '市级用户' : (scope.row.userType === 4 ? '县级用户' :
              (scope.row.userType === 5 ? 'App用户' : ''))))) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人账号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createdBy }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center">
          <template slot-scope="scope">
            <span>{{ $formatDateTime(scope.row.createdDate) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="model.rows.length > 0" class="text-center py-3" @size-change="handleSizeChange"
        @current-change="val => this.model.pageLoad(val)" :current-page="model.pageIndex"
        :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="model.count"></el-pagination>
    </el-main>
  </el-container>
</template>
<script>
import PagedList from "@/libs/PagedList";

export default {
  name: "loglist",
  title: "日志列表",
  data() {
    return {
      model: new PagedList("survey/logs/getAll", 20),
      keywords: "",
      dialogVisible: false,
      date: [this.$formatYMD(), this.$formatYMD()],//设计只查询当天的统计数据，不需要用户输入日期
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  mounted() {
    this.newSearch();
  },
  methods: {
    newSearch() {
      this.model.search({
        createdBy: this.keywords,
        beforeTime: `${this.date[0]} 00:00:00`,
        afterTime: `${this.date[1]} 23:59:59`
      });
    },
    handleSizeChange(pageSize) {
      this.model.pageSize = pageSize;
      this.newSearch();
    }
  }
};
</script>
<style lang='scss'>
.seach-input {
  float: right;
}
.height-search {
  height: 32px;
}
</style>